<template>
    <a-layout-sider v-model:collapsed="collapsed" collapsible
    style="height:100vh;overflow: auto;">
        <a-menu theme="dark" mode="inline" @select="handleSelect">
            <template v-for="m in menuList" :key="m.index">
                <a-menu-item v-if="!m.subItem" :key="m.index">
                    <!-- 使用动态组件渲染图标 -->
                    <component :is="m.icon" />
                    <span slot="title">{{ m.title }}</span>
                </a-menu-item>
                <a-sub-menu v-else>
                    <template #title>
                        <span>
                            <component :is="m.icon" />
                            <span>{{ m.title }}</span>
                        </span>
                    </template>
                    <a-menu-item v-for="sub in m.subItem" :key="sub.index">
                        <component :is="sub.icon" />
                        <span>{{ sub.title }}</span>
                    </a-menu-item>
                </a-sub-menu>
            </template>
        </a-menu>
    </a-layout-sider>

</template>

<script setup>
import { ref,onMounted } from 'vue'
import { useRouter } from 'vue-router';
import {useUserStore} from "@/store/UserInfo.js"

const userStore = useUserStore();

const router = useRouter();
const collapsed = ref(false);

onMounted(()=>{
    menuList.value = userStore.userInfo.menuList;
})

let menuList = ref([])
const handleSelect = (e) => {
    if (e.key) {
        router.push(e.key);
    }
}
</script>

<style scoped></style>